<template>
  <div class="followermain">
    <Tabs>
      <span slot="tabsLeft">{{ $t("lang.关注我") }}</span>
      <span slot="tabsRight">{{ $t("lang.推荐") }}</span>
      <div slot="tabsLeftContent">
        <PullRefresh @refresh="updateFollower">
          <div slot="pullRefreshSlot">
            <van-list
              v-model="leftLoading"
              :finished="leftFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="leftError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="leftOnLoad"
              v-if="follower.length > 0"
            >
              <ItemPanelHeader
                :item="item"
                v-for="(item, index) in follower"
                :key="'follower_' + index"
                ><FollowButton
                  :item="item"
                  slot="itemPanelHeaderMenu"
                ></FollowButton
              ></ItemPanelHeader>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
        </PullRefresh>
      </div>
      <div slot="tabsRightContent">
        <PullRefresh @refresh="updateRecommend">
          <div slot="pullRefreshSlot">
            <van-list
              v-model="rightLoading"
              :finished="rightFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="rightError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="rightOnLoad"
              v-if="recommend.length > 0"
            >
              <ItemPanelHeader
                :item="item"
                v-for="(item, index) in recommend"
                :key="'recommend_' + index"
              >
                <FollowButton
                  :item="item"
                  slot="itemPanelHeaderMenu"
                ></FollowButton>
              </ItemPanelHeader>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
        </PullRefresh>
      </div>
    </Tabs>

    <!-- <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :pulling-text="this.$t('lang.下拉即可刷新')"
      :loosing-text="this.$t('lang.释放即可刷新')"
      :loading-text="this.$t('lang.加载中')"
    >
      <Tabs>
        <span slot="tabsLeft">{{ $t("lang.关注我") }}</span>
        <span slot="tabsRight">{{ $t("lang.推荐") }}</span>
        <div slot="tabsLeftContent">
          <van-list
            v-model="leftLoading"
            :finished="leftFinished"
            :finished-text="$t('lang.已经到底了')"
            :error.sync="leftError"
            :error-text="this.$t('lang.请求失败，点击重新加载')"
            @load="leftOnLoad"
            v-if="follower.length > 0"
          >
            <ItemPanelHeader
              :item="item"
              v-for="(item, index) in follower"
              :key="'follower_' + index"
              ><FollowButton
                :item="item"
                slot="itemPanelHeaderMenu"
              ></FollowButton
            ></ItemPanelHeader>
          </van-list>
          <div v-else class="nodata">
            <NoContent :type="noContentType"></NoContent>
          </div>
        </div>
        <div slot="tabsRightContent">
          <van-list
            v-model="rightLoading"
            :finished="rightFinished"
            :finished-text="$t('lang.已经到底了')"
            :error.sync="rightError"
            :error-text="this.$t('lang.请求失败，点击重新加载')"
            @load="rightOnLoad"
            v-if="recommend.length > 0"
          >
            <ItemPanelHeader
              :item="item"
              v-for="(item, index) in recommend"
              :key="'recommend_' + index"
            >
              <FollowButton
                :item="item"
                slot="itemPanelHeaderMenu"
              ></FollowButton>
            </ItemPanelHeader>
          </van-list>
          <div v-else class="nodata">
            <NoContent :type="noContentType"></NoContent>
          </div>
        </div>
      </Tabs>
    </van-pull-refresh> -->
  </div>
</template>
<script>
export default {
  name: "FollowerMain",
  data() {
    return {
      noContentType: 10,
      isLoading: false,
      follower: [],
      recommend: [],
      leftLoading: false,
      leftFinished: true,
      leftError: false,
      rightLoading: false,
      rightFinished: true,
      rightError: false,
    };
  },
  components: {
    PullRefresh: () =>
      import(
        /* webpackChunkName:"pullRefresh" */ "../../components/common/pullRefresh.vue"
      ),
    Tabs: () =>
      import(/* webpackChunkName: "tabs" */ "../../components/common/tabs"),
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName: "threeColumnList" */ "../../components/common/itemPanel/itemPanelHeader.vue"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:"followButton" */ "../../components/common/followButton.vue"
      ),
    NoContent: () =>
      import(
        /* webpackChunkName:"noContent" */ "../../components/common/noContent.vue"
      ),
  },
  created() {
    let that = this;
    that.updateFollower(1).then(() => {
      that.updateRecommend(1).then(() => {});
    });
  },
  methods: {
    onRefresh() {},
    leftOnLoad() {},
    rightOnLoad() {},
    updateFollower(pageNum, callback) {
      let that = this;
      return new Promise((resolve, rejcet) => {
        that.follower = [
          {
            id: "0123456",
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "0undefined",
            position: "中国",
            isNewContent: true,
            isFollow: true,
          },
        ];
        callback && callback();
        resolve();
      });
    },
    updateRecommend(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.recommend = [
          {
            id: "0123456",
            userId: "0123456",
            userHead:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
            nickName: "0undefined",
            position: "中国",
            isNewContent: true,
            isFollow: false,
          },
        ];
        callback && callback();
        resolve();
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.followermain {
  .tabs {
    .tabs_header {
      a {
        font-size: 14 / @base;
        padding: 10 / @base 0;
        &:last-child {
          border-left: 0;
        }
      }
    }
  }
}
</style>
